import React, { Component , useState } from "react";
import { Container } from "./style";

import { Button, Tooltip, Modal } from "antd";
import { SearchOutlined, AudioOutlined } from "@ant-design/icons";

import { Input } from "antd";
import { DatePicker, Space, Select, Table, Tag, Typography  } from "antd";
import AddManagement from "@/components/AddManagement"
import "antd/dist/antd.css"; // or 'antd/dist/antd.less'
// 中文
import { ConfigProvider } from "antd";
import zhCN from "antd/lib/locale/zh_CN";
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");

const { Option } = Select;
const { Column, ColumnGroup } = Table;
const { Text } = Typography;

// 添加按钮----弹窗
const App = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        添加
      </Button>
      <Modal 
      title="物品档案" 
      visible={isModalVisible} 
      onOk={handleOk} 
      onCancel={handleCancel}
      // footer={null}
      width={1000}
      >
        <AddManagement/>
      </Modal>
    </>
  );
};

const columns = [
  {
    title: "序号",
    dataIndex: "id",
    key: "id",
    align: "center",
  },
  {
    title: "物品名称",
    dataIndex: "name",
    key: "name",
    align: "center",
  },
  {
    title: "物品编码",
    dataIndex: "number",
    key: "number",
    align: "center",
  },
  {
    title: "物品分类",
    dataIndex: "type",
    key: "type",
    align: "center",
  },
  {
    title: "品牌",
    dataIndex: "brand",
    key: "brand",
    align: "center",
  },
  {
    title: "规格/型号",
    dataIndex: "model",
    key: "model",
    align: "center",
  },
  {
    title: "单位",
    dataIndex: "Company",
    key: "Company",
    align: "center",
  },
  {
    title: "当前库存",
    dataIndex: "current",
    key: "current",
    align: "center",
  },
  {
    title: "出库数量",
    dataIndex: "StorageQuantity",
    key: "StorageQuantity",
    align: "center",
  },
  {
    title: "金额",
    dataIndex: "tags",
    key: "tags",
    align: "center",
  },
];

const data = [
  {
    id: "1",
    name: "长条毛巾",
    number: "ctmj",
    type: "劳保用品",
    brand: "洁丽雅",
    model: "55cm*30cm",
    Company: "条",
    current: 100,
    StorageQuantity: 100,
    tags: 100,
  },
  {
    id: "2",
    name: "香皂",
    number: "xz",
    type: "劳保用品",
    brand: "舒肤佳",
    model: "3个/盒",
    Company: "盒",
    current: 50,
    StorageQuantity: 100,
    tags: 200,
  },
];

const columns2 = [
  {
    title: "序号",
    dataIndex: "id",
    key: "id",
    align: "center",
  },
  {
    title: "部门",
    dataIndex: "bm",
    key: "bm",
    align: "center",
    render: () => (
      <Select
        showSearch
        style={{ width: 200 }}
        placeholder="请选择领用部门"
        optionFilterProp="children"
      >
        <Option value="in">请选择领用部门</Option>
        <Option value="panying">教务处</Option>
        <Option value="bumen">办公室</Option>
        <Option value="huodong">信息中心</Option>
        <Option value="banji">总务处</Option>
        <Option value="other">其他</Option>
      </Select>
    ),
  },
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    align: "center",
  },
  {
    title: "长条毛巾 （ctmj）",
    dataIndex: "ctmj",
    key: "ctmj",
    align: "center",
    placeholder: "请输入领用数量",
    render: () => (
      <Space span={2}>
        <Input defaultValue="2" placeholder="请输入领用数量" />
      </Space>
    ),
  },
  {
    title: "香皂 （sfjxj）",
    dataIndex: "sfjxj",
    key: "sfjxj",
    align: "center",
    placeholder: "请输入领用数量",
    render: () => (
      <Space span={2}>
        <Input defaultValue="4" placeholder="请输入领用数量" />
      </Space>
    ),
  },
];
const data2 = [
  {
    id: "1",
    name: "张俊",
  },
  {
    id: "2",
    name: "申梦月",
  },
  {
    id: "3",
    name: "黄哲",
  },
  {
    id: "4",
    name: "陈张婷",
  },
  {
    id: "5",
    name: "张立琼",
  },
];

// const onSearch = (value) => console.log(value);
// const { RangePicker } = DatePicker;
// import connect from './connect'
// @connect
class index extends Component {
  constructor() {
    super();

    function onChange(value) {
      console.log(`selected ${value}`);
    }

    function onBlur() {
      console.log("blur");
    }

    function onFocus() {
      console.log("focus");
    }

    function onSearch(val) {
      console.log("search:", val);
    }
  }
  render() {
    return (
      <Container>
        <div class="header">
          <div class="hh1">
            <b class="red">*</b>
            <span class="nn">出库单号：</span>
            <Space span={2}>
              <Input defaultValue="RK20190523001" />
            </Space>
          </div>

          <div class="hh1">
            <b class="red">*</b>
            <span class="nn">出库日期：</span>
            <ConfigProvider locale={zhCN}>
              <DatePicker
                defaultValue={moment("2020-12-25", "YYYY-MM-DD")}
                style={{ width: 200 }}
              />
            </ConfigProvider>
          </div>

          <div class="hh1">
            <b class="red">*</b>
            <span class="nn">出库仓库：</span>
            <Select
              showSearch
              style={{ width: 200 }}
              placeholder="选择出库仓库"
              optionFilterProp="children"
              onChange={this.onChange}
              onFocus={this.onFocus}
              onBlur={this.onBlur}
              onSearch={this.onSearch}
              filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
            >
              <Option value="store">选择出库仓库</Option>
              <Option value="xingzheng">本部高中-行政楼1号仓库</Option>
              <Option value="shiyan">本部高中-实验耗材仓库</Option>
              <Option value="jiaming">嘉明分校-嘉明仓库</Option>
              <Option value="dijing">帝景分校-行政楼一号仓库</Option>
            </Select>
          </div>

          <div class="hh1">
            <b class="red">*</b>
            <span class="nn">出库类型：</span>
            <Select
              showSearch
              style={{ width: 200 }}
              placeholder="选择出库类型"
              optionFilterProp="children"
              onChange={this.onChange}
              onFocus={this.onFocus}
              onBlur={this.onBlur}
              onSearch={this.onSearch}
              filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
            >
              <Option value="in">选择出库类型</Option>
              <Option value="panying">个人领用</Option>
              <Option value="bumen">部门领用</Option>
              <Option value="huodong">活动领用</Option>
              <Option value="banji">班级领用</Option>
              <Option value="yingkui">盈亏</Option>
              <Option value="other">其他</Option>
            </Select>
          </div>
        </div>

        <div class="hh2">
          <div class="hh22">
            <Button>删除</Button>
          </div>
          <div class="hh22">
             <App />
          </div>
          <div>
            <em></em>
            <p className="add">添加出库物品</p>
          </div>
        </div>

        <div class="hh3">
          {/* <Table 
          columns={columns} 
          dataSource={data} 
          pagination={false}
          bordered 
          /> */}

          <Table
            columns={columns}
            dataSource={data}
            pagination={false}
            bordered
            summary={(pageData) => {
              let totalcurrent = 0;
              let totalStorageQuantity = 0;
              let totaltags = 0;

              pageData.forEach(({ current, StorageQuantity, tags }) => {
                totalcurrent += current;
                totalStorageQuantity += StorageQuantity;
                totaltags += tags;
              });

              return (
                <>
                  <Table.Summary.Row align="center">
                    <Table.Summary.Cell>合计</Table.Summary.Cell>
                    <Table.Summary.Cell></Table.Summary.Cell>
                    <Table.Summary.Cell></Table.Summary.Cell>
                    <Table.Summary.Cell></Table.Summary.Cell>
                    <Table.Summary.Cell></Table.Summary.Cell>
                    <Table.Summary.Cell></Table.Summary.Cell>
                    <Table.Summary.Cell></Table.Summary.Cell>

                    <Table.Summary.Cell>
                      <Text>{totalcurrent}</Text>
                    </Table.Summary.Cell>
                    <Table.Summary.Cell>
                      <Text>{totalStorageQuantity}</Text>
                    </Table.Summary.Cell>
                    <Table.Summary.Cell colSpan={2}>
                      <Text>{totaltags}</Text>
                    </Table.Summary.Cell>
                  </Table.Summary.Row>
                </>
              );
            }}
          />
        </div>

        <div class="hh2">
          <div class="hh22">
            <Button>删除</Button>
          </div>
          <div class="hh22">
            <App />
          </div>
          <div>
            <em></em>
            <p className="add">添加领用人员</p>
          </div>
        </div>

        <div class="hh3">
          <Table
            columns={columns2}
            dataSource={data2}
            bordered
            pagination={false}
            summary={(pageData) => {
              let totalcurrent = 0;
              let totalStorageQuantity = 0;
              let totaltags = 0;

              pageData.forEach(({ current, StorageQuantity, tags }) => {
                totalcurrent += current;
                totalStorageQuantity += StorageQuantity;
                totaltags += tags;
              });

              return (
                <>
                  <Table.Summary.Row align="center">
                    <Table.Summary.Cell>合计</Table.Summary.Cell>
                    <Table.Summary.Cell></Table.Summary.Cell>
                    <Table.Summary.Cell></Table.Summary.Cell>

                    <Table.Summary.Cell>
                      <Text>{totalcurrent}</Text>
                    </Table.Summary.Cell>
                    <Table.Summary.Cell>
                      <Text>{totalStorageQuantity}</Text>
                    </Table.Summary.Cell>
                  </Table.Summary.Row>
                </>
              );
            }}
          />
        </div>

        <div class="hh4">
          <span>制单人：</span>
          <span>黄哲</span>
          <span>制单日期：</span>
          <span>{moment().format("YYYY-MM-DD")}</span>
        </div>
        <div class="clear"></div>
        <div class="hh5">
          <span>备注：</span>
          <textarea name="" id="" cols="160" rows="5"></textarea>
        </div>
        <div class="clear"></div>
        <div class="hh6">
          <span>
            <Button type="primary">确定</Button>
          </span>
          <span>
            <Button>取消</Button>
          </span>
        </div>

       
        
      </Container>
    );
  }
}

export default index;
